<template lang="html">
  <div class="tuiRentBill" id="">
    <h2 v-title="'退租账单'"></h2>
    <div class="tuiRentHouse">
      <p class="tuiRentTit">
        <span>{{tuiRent.title}}</span>
        <em>已退租</em>
      </p>
      <div class="houseDiv">
        <img :src="tuiRent.housePic" alt="" class="houseImg">
        <div class="houseCon">
          <p class="houseAddr">
            <img src="@/assets/images/addr@2x.png" alt="" width="10">
            {{tuiRent.address}}
          </p>
          <p class="">租期：{{rentTime}}</p>
          <span>退租时间：{{exitTime}}</span>
        </div>
      </div>
    </div>
    <p class="p10">退租结算信息</p>
    <ul class="tuiRentList">
      <li>
        <span>房屋押金：</span>
        {{(tuiRent.depositMoney/100).toFixed(2)}}元
      </li>
      <li>
        <span>可退租金：</span>
        {{(tuiRent.rentRefundAmount/100).toFixed(2)}}元
      </li>
      <li>
        <span>租金补差：</span>
        {{(tuiRent.needPayMoney/100).toFixed(2)}}元
      </li>
      <li v-for="item in detailList" :key="item.key">
        <span>{{item.cutPaymentName}}：</span>
        {{(item.cutPaymentMoney/100).toFixed(2)}}元
      </li>
      <!-- <li>
        <span>滞纳金：</span>
        <div class="lateFees">
          <p>
            <em>第一期账单超过xxx天缴纳</em>
            100元
          </p>
          <p>
            <em>第二期账单超过xxx天缴纳</em>
            150元
          </p>
        </div>
      </li> -->
      <li>
        <span>实际退款：</span>
        {{(tuiRent.realRefundAmount/100).toFixed(2)}}元
      </li>
    </ul>

    <div class="fixedBottom">
      <button type="button" name="button" class="blockBtn" @click="toContact()">查看电子合同</button>
    </div>
  </div>
</template>

<script src="./tuiRentBill.js"></script>

<style lang="scss" src="./tuiRentBill.scss"></style>
